<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
        /*去掉百度地图左下角logo*/
        .anchorBL a{
            display: none;
        }

        .anchorBL img{
            display: none;
        }

        .anchorBL span {
            display: none !important;
        }
        /*去掉百度地图左下角logo*/
    </style>
    <title>电子地图</title>
</head>
<body>
<div id="map" style="width:100%; height: 100%;"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
<script type="text/javascript" src="https://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
<script th:inline="javascript">
    var map = new BMap.Map("map"); // 创建地图实例
    // 创建点坐标
    var point = new BMap.Point(116.404, 39.915);
    // 初始化地图，设置中心点坐标和地图级别
    map.centerAndZoom(point, 15);
    // 准备热力数据
    var data = [
        {lng: 116.404, lat: 39.915, count: 500},
        {lng: 116.414, lat: 39.915, count: 20},
        {lng: 116.404, lat: 39.925, count: 30},
        {lng: 116.404, lat: 39.925, count: 30},
        {lng: 116.404, lat: 39.925, count: 30},
        {lng: 116.404, lat: 39.925, count: 30},
        // 其他数据点...
    ];
    var heatmapOverlay = new BMapLib.HeatmapOverlay({
        radius: 30
        /*gradient: {
            0.4: "blue",
            0.6: "cyan",
            0.8: "lime",
            1: "red"
        },*/ // 设置热力图渐变色
        // opacity: 0.5 // 设置热力图透明度
    });
    map.addOverlay(heatmapOverlay);
    heatmapOverlay.setDataSet({data: data, max: 100});
    heatmapOverlay.show();
</script>
</body>
</html>